
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
let data = [
    { "count": 4000, "price": 1200, "unitPrice": "0.3000" },
    { "count": 8000, "price": 2000, "unitPrice": "0.2500" },
    { "count": 40000, "price": 8000, "unitPrice": "0.2000" }
]
/**
 * 需求1：渲染页面按钮
 * 分析：
 *  count ： 渲染是button按钮中间的文本数据
 *  price 和  unitPrice 自定义属性，将来点击按钮的时候，需要使用这两个值
 *  去更改下面p中的显示的数据
 */
let btnHtml = ""
// 循环遍历
data.forEach(function (v, i) {
    btnHtml += `<span class="number ${i === 0 ? 'select' : ''}" price="${v.price}" unitPrice="${v.unitPrice}">${v.count}次</span>`
})
console.log(btnHtml);
// 将拼接的html片段放到页面上
let btns = document.querySelector(".banner .btns")
btns.innerHTML += btnHtml

/**
 * 需求2：点击页面上的按钮，切换对应的css样式，同时切换下面页面显示的价格和次数
 */
let spanBtn = document.querySelectorAll(".banner .btns .number")
// 循环遍历，注册点击事件
spanBtn.forEach(function (v) {
    v.addEventListener("click", function () {
        // 在添加之前，不知道以前是那个span有select 类名，
        // 我们可以将所有span的select类名全部去掉   
        for (let x = 0; x < spanBtn.length; x++) {
            spanBtn[x].classList.remove("select")
        }
        // 添加对应的class
        this.classList.add("select")
        // 切换对应的p标签中显示的价格和次数数据
        let money = document.querySelector(".banner .use .money")
        let count = document.querySelector(".banner .use .count")
        money.innerText = this.getAttribute("price")
        count.innerText = this.getAttribute("unitPrice")
    })
})









let loginBtns = document.querySelectorAll(".under span")
console.log(loginBtns)
let loginDiv = document.querySelectorAll(".bigBox .box-one")
console.log(loginDiv)

loginBtns.forEach(function (v, i) {
    
    v.addEventListener("click", function () {
      console.log(1111)
        for (let x = 0; x < loginDiv.length; x++) {
           console.log(1111)  
           loginBtns[x].className=""
           loginDiv[x].classList.remove("do")

         }    
        
       this.className="active"
       loginDiv[i].classList.add("do")

    })

}
)
